<template>
  <div class="dashboard-container">
    <div class="top_box">
      <div class="left_box">
        <rose-pie></rose-pie>
      </div>
      <div class="right_box">
        <single></single>
      </div>
    </div>
    <div class="bottom_box">
      <seven-day></seven-day>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import RosePie from '../../components/echart/rosePie.vue'
import Single from '../../components/echart/single.vue'
import SevenDay from '../../components/echart/sevenDay.vue'

export default {
  name: 'Dashboard',
  components: {
    RosePie,
    Single,
    SevenDay
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.top_box {
  display: flex;
  justify-content: space-between;
  width: 1250px;
  height: 400px;
  margin: 20px auto 0;

  .left_box {
    width: 580px;
    height: 380px;
    border: 2px solid rgba(243, 244, 244, 1);
    border-radius: 5px;
  }

  .right_box {
    width: 640px;
    height: 380px;
    border: 2px solid rgba(243, 244, 244, 1);
    border-radius: 5px;
  }
}

.bottom_box {
  width: 1250px;
  height: 280px;
  margin: 0 auto;
  border: 2px solid rgba(243, 244, 244, 1);
  border-radius: 5px;
}
</style>
